<%@page pageEncoding="UTF-8" isELIgnored="false"%>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@taglib prefix="fmt" uri="http://java.sun.com/jsp/jstl/fmt"%>
<%@taglib prefix="f" uri="http://susano.googlecode.com/functions"%>

<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="ja" xml:lang="ja">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="robots" content="index,follow" />
<meta name="keywords" content="冷蔵庫にあの食材あったかな？同じもの買っちゃったら勿体無いし。。。そんな時に便利な「みんなの在庫管理サービス」です。ご利用はもちろん無料です。" />
<link rel="SHORTCUT ICON" href="" />
<link rel="icon" TYPE="image/x-icon" href="" />
<link type="text/css" href="/css/style.css" rel="stylesheet" />
<link type="text/css" href="/css/custom-theme/jquery-ui-1.7.2.custom.css" rel="stylesheet" />
<script type="text/javascript" src="/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="/js/jquery-ui-1.7.2.custom.min.js"></script>
<script type="text/javascript" src="/js/jquery.json-2.2.min.js"></script>
<script type="text/javascript">
$(function(){

	<%-- アイテム一覧をsortableに --%>
	$("#items").sortable({
		revert: false
	});

	<%-- 入力ボックス --%>
	$("#inputBox").dialog({
		bgiframe: true,
		autoOpen: false,
		height: 220,
		width: 500,
		modal: true,
		buttons: {
			'OK': function() {
				clickInputBoxOK($(this));
			},
			Cancel: function() {
				$(this).dialog('close');
			}
		}
	});

	<%-- 入力ボックスOKボタンクリック処理 --%>
	function clickInputBoxOK(dialog) {
		//-- 更新
		// リストItemId取得
		var itemId = $("#inputItemId").val();
		// 状態取得
		var signal = $("input[name='inputStatus']:checked").val();
		// アイテム取得
		var item = $("#inputItem").val();
		// コメント取得
		var comment = $("#inputComment").val();
		// liへ変更値をセット
		$('#' + itemId + '_item').attr('class', 'signal-' + signal);
		$('#' + itemId + '_item a').text(item);
		$('#' + itemId + '_comment').text(comment);

		dialog.dialog('close');
	}


	<%-- アイテムのリンクがクリックされたら編集用ダイアログを表示 --%>
	$('#items li span a').click(function(){
		var itemId = $(this).parent().parent().attr('id');
		$('#inputBox').dialog('option', 'title', 'アイテム編集');
		// リストItemId取得
		$('#inputItemId').val(itemId);
		// アイテムSPAN取得
		$itemSpan = $('#' + itemId + '_item');
		// コメントSPAN取得
		$commentSpan = $('#' + itemId + '_comment');
		$('#inputBox #inputItem').val($itemSpan.text());
		$('#inputBox #inputComment').val($commentSpan.text());
		// アイテムSPANからclassを取得
		var signal = $itemSpan.attr('class');
		if (signal == 'signal-green') {
			$("#inputStatus-green").attr('checked', true);
		} else if (signal == 'signal-yellow') {
			$("#inputStatus-yellow").attr('checked', true);
		} else if (signal == 'signal-red') {
			$("#inputStatus-red").attr('checked', true);
		}
		$("#inputBox").dialog('open');
	});

	<%-- 入力ボックスでEnterKeyPress --%>
	$("#inputBox").keypress(function(e){
		if (e.keyCode == 13) {
			clickInputBoxOK($(this));
		}
	});

	<%-- ×削除ボタンが押されたらアイテムを消す。 --%>
	$("#items li div").click(function(){
		// リストItemId取得
		var itemId = $(this).parent().attr('id');
		$('#' + itemId).remove();
	});

	<%-- アイテム新規追加ボタンクリック --%>
	$('#add').click(function(){
		// シーケンスから最新番号取得
		var nextval = parseInt($('#nextval').val()) + 1;
		$('#nextval').val(nextval);
		// itemId作成
		var itemId = 'item_' + nextval;
		$newItem = $('#item_template').clone(true)
			.insertAfter($('#item_template'))
			.attr('id', itemId);
		$('span:nth-child(1)', $newItem).attr('id', itemId + '_item');
		$('span:nth-child(2)', $newItem).attr('id', itemId + '_comment');
		$newItem.show();
	});

	<%-- 緑フィルタボタンクリック --%>
	$('#filter_green').click(function(){
		$('#explanation').attr('class', 'signal-green');
		$('#explanation').parent().parent().show();
		filter($('#items li'), 'signal-green');
	});
	<%-- 黄フィルタボタンクリック --%>
	$('#filter_yellow').click(function(){
		$('#explanation').attr('class', 'signal-yellow');
		$('#explanation').parent().parent().show();
		filter($('#items li'), 'signal-yellow');
	});
	<%-- 赤フィルタボタンクリック --%>
	$('#filter_red').click(function(){
		$('#explanation').attr('class', 'signal-red');
		$('#explanation').parent().parent().show();
		filter($('#items li'), 'signal-red');
	});
	<%-- フィルタ解除ボタンクリック --%>
	$('#filter_clear').click(function(){
		$('#explanation').attr('class', '');
		$('#explanation').parent().parent().hide();
		filterClear($('#items li'));
	});

	function filter(li, signal) {
		li.children('span:nth-child(1)').each(function(){
			// templateはスキップ
			if ($(this).parent().attr('id') != 'item_template') {
				if ($(this).attr('class') == signal) {
					$(this).parent().show(); // liをshow
				} else {
					$(this).parent().hide(); // liをhide
				}
			}
		});
	}
	function filterClear(li) {
		li.each(function(){
			// templateはスキップ
			if ($(this).attr('id') != 'item_template') {
				$(this).show(); // liをshow
			}
		});
	}

	<%-- レスポンス用コールバック関数 --%>
	var callback = function (data, textStatus) {
		//data now will be a JSON object instead of plain text
		alert('callbacked! data=' + data + ', textStatus=' + textStatus);
		if (data.error != '') {
			alert('error='+data.error);
		}
		$('#workStatus').hide();
	};

	<%-- 保存ボタンクリック --%>
	$('#save').click(function(){
		alert("save");
		$('#workStatus').children('span').text('保存');
		$("#workStatus").show();
		var url = '/save';
		$val = '{';
		$val += '"pubFlg":' + $('#pubFlg').val() + ',';
		$val += '"items":' + '[';

		$('#items li').each(function(){
			// templateはスキップ
			if ($(this).attr('id') != 'item_template') {
				var item = $(this).children('span:nth-child(1)').children('a').text();
				var comment = $(this).children('span:nth-child(2)').text();
				var signal = $(this).children('span:nth-child(1)').attr('class').split('-')[1];
				alert("item="+item + ", comment=" + comment + ', signal=' + signal);
				$val += '{';
				$val += 'item:"' + item + '",';
				$val += 'comment:"' + comment + '",';
				$val += 'signal:"' + signal + '",';
				$val += '},';
			}
		});

		$val += ']';
		$val += '}';
		var data = {data : $val};
		//var jsonstr = '{"data" : {"aaa":"あああ", "bbb":"いいい"}}';
		//var data = $.evalJSON(jsonstr);
		$.post(url, data, callback, 'json');
	});

	<%-- 初期化時にローディンステータスを隠す --%>
	$("#workStatus").hide();

	<%-- テストボタン --%>
	$('#test').click(function(){
		$('#items li').each(function(){
			// templateはスキップ
			if ($(this).attr('id') != 'item_template') {
				var item = $(this).children('span:nth-child(1)').children('a').text();
				var comment = $(this).children('span:nth-child(2)').text();
				var signal = $(this).children('span:nth-child(1)').attr('class').split('-')[1];
				alert("item="+item + ", comment=" + comment + ', signal=' + signal);
			}
		});
	});

	//$("#items li:nth-child(2)").css("background-color", "yellow");
	//$span = $("li:nth-child(2) span:nth-child(1)", "#items");
	//$text = $span.text();
	//alert($text);

	//$("#loading").hide();


	//$("#save").click(function(){
	//	alert("保存ボタンくりっく。");
	//	$("#loading").show();
	//});

	// TODO: ajax POST example.
	//$.post("test.php", { func: "getNameAndTime" },
	//function(data){
	//alert(data.name); // John
	//console.log(data.time); //  2pm
	//}, "json");

	// TODO: ajax GET example.
	//$("#btn").click(function(){
	//	$.ajax({
	//	type : "GET",
	//	url : 'ajaxtest-load.html',
	//	dataType : "html",
	//	success: function(data) {
	//		alert(data); // shows whole dom
	//		alert($(data).find('#wrapper').html()); // returns null
	//	},
	//	error : function() {
	//		alert("Sorry, The requested property could not be found.");
	//	}
	//});

});
</script>

<title>みんなの在庫管理サービス(仮)</title>
</head>
<body>

<div id="container">


<div class="header">
	<h1 style="float: left;">みんなの在庫管理サービス(仮)</h1>
	<div style="float: right; background:gray;">[PR]</div>
</div>


<input type="button" id="test" value="#items liをなめる処理テスト" >

<div class="status">
	<div>
		<c:if test="${user == null}">
		<p style="margin:3px;">ゲストさん、ようこそ。
		<a href="${loginUrl}" style="font-size: 9pt;">Login</a>
		</p>
		</c:if>
		<c:if test="${user != null}">
		<p style="margin:3px;"><c:out value="${user}" /> さん、ようこそ。
		<a href="${logoutUrl}" style="font-size: 9pt;">Logout</a>
		</p>
		</c:if>
	</div>
</div>

<div class="pageheader">
	<div style="width: 600px; margin: 4px; float: left;">
		<p style="margin-top:8px; padding-left: 10px; border-left: 12px solid darkblue;">
			<b>${nickName}</b> さんの在庫です。
			(現在みんなに
			<c:if test="${pubFlg == 1}">
			<span style="color:red;">公開中</span>
			</c:if>
			<c:if test="${pubFlg == 0}">
			<span style="color:blue;">非公開</span>
			</c:if>
			です。)
			<%-- TODO: 公開・非公開切り替え --%>
			<c:if test="${pubFlg == 0}">
			<span id="changePub" style="color:blue; cursor:pointer; font-size:8pt;">
			公開する
			</span>
			</c:if>
			<c:if test="${pubFlg == 1}">
			<span id="changePri" style="color:blue; cursor:pointer; font-size:8pt;">
			非公開にする
			</span>
			</c:if>
			<input id="pubFlg" type="hidden" value="${pubFlg}">
		</p>
	</div>
	<div style="margin-top:8px; float: left; text-align: right;">
		<p>
			<span class="signal-green">在庫あり。</span>
			<span class="signal-yellow">残り少し。</span>
			<span class="signal-red">品切れ！</span>
		</p>
	</div>
</div>



<div class="contents">

	<div style="float: left; width: 200px; background: gray;">
		<div id="save" class="button">
			保存<span class="ui-icon ui-icon-disk"></span>
		</div>
		<div id="add" class="button">
			アイテム追加<span class="ui-icon ui-icon-circle-plus"></span>
		</div>
		<div id="filter_green" class="button">
			抽出<span class="ui-icon ui-icon-star"></span>
			<img src="/images/signal-green.gif" />
		</div>
		<div id="filter_yellow" class="button">
			抽出<span class="ui-icon ui-icon-star"></span>
			<img src="/images/signal-yellow.gif" />
		</div>
		<div id="filter_red" class="button">
			抽出<span class="ui-icon ui-icon-star"></span>
			<img src="/images/signal-red.gif" />
		</div>
		<div id="filter_clear" class="button">
			抽出解除<span class="ui-icon ui-icon-star"></span>
		</div>
	</div>

	<div style="float: left; width: 580px;">
		<%-- 作業ステータス --%>
		<div id="workStatus" class="workStatus">
			<span></span>しています...
			<img src="/images/ajax-loader.gif" id="loading" class="loading" height="14" width="14"/>
		</div>
		<%-- シーケンス取得用タグ --%>
		<%-- TODO: パラメータに値をセット --%>
		<c:if test="${nextval == null}"><input type="hidden" id="nextval" value="0"></c:if>
		<c:if test="${nextval != null}"><input type="hidden" id="nextval" value="${nextval}"></c:if>
		<%-- 抽出ステータス --%>
		<div style="display: none;">
			<p style="margin: 8px;"><span id="explanation">&nbsp;</span>で抽出。</p>
		</div>
		<%-- アイテム一覧 --%>
		<ul id="items" class="items">
			<%-- JSが利用するテンプレ --%>
			<li id="item_template" style="display: none;">
				<span id="item_template_item" class="signal-green"><a href="#">New!</a></span>
				<span id="item_template_comment" class="comment">New!</span>
				<div class="close">×</div>
				<p style="clear:both;"></p>
			</li>
			<%-- 表示される一覧 --%>
			<c:forEach var="v" varStatus="s" items="${items}">
			<li id="item_${s.index}">
				<span id="item_${s.index}_item" class="signal-${v.signal}"><a href="#">${v.item}</a></span>
				<span id="item_${s.index}_comment" class="comment">${v.comment}</span>
				<div class="close">×</div>
				<p style="clear:both;"></p>
			</li>
			</c:forEach>
		</ul>
		<p></p>

		<ul>TODO:
			<li><del>ドラッグアンドドロップで順序変更</del></li>
			<li><del>追加ボタン</del></li>
			<li><del>操作パネル（削除、状態変更）</del></li>
			<li><del>抽出</del></li>
			<li><del>抽出解除</del></li>
			<li>jsでリクエストJSON作成</li>
			<li>認証</li>
			<li>保存ボタン</li>
			<li>公開非公開ボタン</li>
			<li>サーバサイド実装</li>
			<li>アイテム番号シーケンスをHiddenにセットすること</li>
		</ul>

	</div>

	<p style="clear:both;"></p>

	<div style="text-align: center; padding:10px;">[PR]</div>
</div>


<div id="inputBox" style="display: hidden;">
	<input type="hidden" id="inputItemId" >
	<label><input type="radio" name="inputStatus" id="inputStatus-green" value="green"><img src="/images/signal-green.gif" />在庫あり。</label>
	<label><input type="radio" name="inputStatus" id="inputStatus-yellow" value="yellow"><img src="/images/signal-yellow.gif" />残り少し。</label>
	<label><input type="radio" name="inputStatus" id="inputStatus-red" value="red"><img src="/images/signal-red.gif" />品切れ！</label>
	<p style="clear:both;"></p>
	<table>
		<tr>
			<th style="font-size: 9pt; background: #C4CEFB;">品名</th>
			<th style="font-size: 9pt; background: #C4CEFB;">メモ</th>
		</tr>
		<tr>
			<td><input id="inputItem" type="text" style="float:left; width:100px;"></td>
			<td><input id="inputComment" type="text" style="float:left; width:340px;"></td>
		</tr>
	</table>
</div>


<div class="footer">
	<p style="padding: 12px;">(C)2009 みんなの在庫管理サービス(仮)</p>
</div>

</div><!-- /container -->
</body>
</html>
